<template>
  <div class="server-setting">
    <a-form
        :model="formData"
        name="basic"
        :label-col="{ span: 2 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
    >
      <div class="server-setting-title">IMAP</div>
      <a-form-item
          label="服务器"
          name="username"
      >
        <a-input v-model:value="formData.username" />
      </a-form-item>
      <a-form-item
          label="端口"
          name="username"
      >
        <a-input v-model:value="formData.username" />
      </a-form-item>
      <a-form-item
          label="类型"
          name="username"
          style="margin-bottom: 0;"
      >
        <a-select v-model:value="formData.select">
          <a-select-option value="">无</a-select-option>
          <a-select-option value="usa">SSL/TLS</a-select-option>
        </a-select>
      </a-form-item>
      <div class="server-setting-title">SMTP</div>
      <a-form-item
          label="服务器"
          name="username"
      >
        <a-input v-model:value="formData.username" />
      </a-form-item>
      <a-form-item
          label="端口"
          name="username"
      >
        <a-input v-model:value="formData.username" />
      </a-form-item>
      <a-form-item
          label="类型"
          name="username"
      >
        <a-select v-model:value="formData.select">
          <a-select-option value="">无</a-select-option>
          <a-select-option value="usa">SSL/TLS</a-select-option>
        </a-select>
      </a-form-item>
      <div style="padding-top: 16px;"><a-button type="primary" style="width: 80px;">保存</a-button></div>
    </a-form>

  </div>
</template>

<script setup>
import {reactive} from "vue";

const formData = reactive({})
</script>

<style lang="less" scoped>
.server-setting{
  .server-setting-title{
    font-size: 16px;
    padding-bottom: 8px;
    padding-top: 16px;
    font-weight: 600;
    &:first-child{
      padding-top: 0;
    }
  }
  :deep(.ant-col-2) {
    flex: none;
    width: 56px;
  }
  :deep(.ant-form-item-label > label) {
    color: #666666;
  }
  :deep(.ant-form-horizontal .ant-form-item-control) {
    flex: none;
    width: 200px;
  }
  :deep(.ant-form-item){
    margin-bottom: 8px;
  }
}
</style>
